﻿@page "/Numeric-TextBox/Forms-Validation"

@using Syncfusion.Blazor.Inputs;
@using Syncfusion.Blazor.Buttons;
@using System.ComponentModel.DataAnnotations;

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample is used to validate form using the Data Annotation. Type the number in the input element. If the input value is a valid number, then the given input will be ready to submit. Otherwise, an error message will be shown until you enter the valid number.</p>
</SampleDescription>
<ActionDescription>
    <p>The form enables the validation with data annotation attributes by clicking on the submit externally. All rules are validated by the DataAnnotationsValidator.</p>
    <p>The above age field is configured with the following rules.</p>
    <table style='width:100%'>
        <tr>
            <th>Field</th>
            <th>Rule</th>
        </tr>
        <tr>
            <td>Required</td>
            <td>The field must have a valid number.</td>
        </tr>
        <tr>
            <td>Range</td>
            <td>The field must have a number value between 1 to 80.</td>
        </tr>
    </table>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="control_wrapper">
        @if (string.IsNullOrEmpty(Message))
        {
            <EditForm Model="@annotation" OnValidSubmit="@OnValidSubmit" OnInvalidSubmit="@OnInvalidSubmit">
                <DataAnnotationsValidator />
                <div>
                    <SfNumericTextBox TValue="int?" Placeholder="Enter an Age" id='textbox' @bind-Value="@annotation.Age"></SfNumericTextBox>
                    <ValidationMessage For="@(() => annotation.Age)" />
                </div>
                <div class="sfButton">
                    <SfButton type="submit" IsPrimary="true">Submit</SfButton>
                </div>
            </EditForm>
        }
        else
        {
            <div class="alert alert-success">
                @Message
            </div>
        }
    </div>
</div>

<style>

    .control_wrapper {
        width: 350px;
        margin: 0 auto;
        padding-top: 70px;
    }

    .sfButton {
        padding-top: 20px;
        display: flex;
        justify-content: center;
    }

    .validation-message {
        color: red;
        padding-top: 5px;
    }
</style>
@code {
    private string Message = string.Empty;
    private Annotation annotation = new Annotation();
    async void OnValidSubmit()
    {
        Message = "Form Submitted Successfully!";
        await Task.Delay(2000);
        Message = string.Empty;
        annotation.Age = null;
        StateHasChanged();
    }
    private void OnInvalidSubmit()
    {
        Message = string.Empty;
    }
    public class Annotation
    {
        [Required(ErrorMessage = "The Age field is required.")]
        [Range(1, 80, ErrorMessage = "The age should be between 1 to 80.")]
        public int? Age { get; set; }
    }
}
